<template>
  <a-modal :title="title" :visible="visible" @ok="handleOk" :confirmLoading="confirmLoading" @cancel="handleCancel" width="40%">
    <a-form-model ref="form" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-model-item label="名称" prop="name">
        <a-input v-model="form.name" />
      </a-form-model-item>
      <a-form-model-item label="Job Group" prop="jobGroup">
        <a-input v-model="form.jobGroup" />
      </a-form-model-item>
      <a-form-model-item label="Job Name" prop="jobName">
        <a-input v-model="form.jobName" />
      </a-form-model-item>

      <a-form-model-item label="cron" prop="cron">
        <a-input v-model="form.cron" />
      </a-form-model-item>
      <a-form-model-item label="Disallow Concurrent Exec" prop="disallowConcurrentExecution">
        <a-select v-model="form.disallowConcurrentExecution">
          <a-select-option :value="1">true </a-select-option>
          <a-select-option :value="0">false </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="Class" prop="clazz">
        <a-input v-model="form.clazz" />
      </a-form-model-item>

      <a-form-model-item label="Method" prop="method">
        <a-input v-model="form.method" />
      </a-form-model-item>

      <a-form-model-item label="运行状态" prop="dbStatus">
        <a-select v-model="form.dbStatus">
          <a-select-option v-for="d in dict['COMMON.TASK_STATUS']" :key="+d.code">
            {{ d.label }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script>
import { add, edit } from '@/api/task'

const defaultForm = {
  id: undefined,
  name: undefined,
  jobGroup: 'DEFAULT_JOB_GROUP',
  jobName: undefined,
  cron: undefined,
  disallowConcurrentExecution: 1,
  clazz: undefined,
  method: undefined,
  dbStatus: 0
}

export default {
  props: {
    isAdd: {
      type: Boolean,
      required: true
    },
    dict: {}
  },
  data() {
    return {
      // title: '',
      visible: false,
      confirmLoading: false,
      labelCol: { span: 6 },
      wrapperCol: { span: 16 },

      form: { ...defaultForm },
      rules: {
        name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
        jobGroup: [{ required: true, message: '请输入 Job Group', trigger: 'blur' }],
        jobName: [{ required: true, message: '请输入 Job Name', trigger: 'blur' }],
        cron: [{ required: true, message: '请输入 cron', trigger: 'blur' }],
        disallowConcurrentExecution: [{ required: true, message: '请选择 同时执行状态', trigger: 'blur' }],
        clazz: [{ required: true, message: '请输入 Class', trigger: 'blur' }],
        method: [{ required: true, message: '请输入 Method', trigger: 'blur' }]
      }
    }
  },
  computed: {
    title: function () {
      return this.isAdd ? '新建' : '修改'
    }
  },
  methods: {
    handleCancel(e) {
      this.resetForm()
    },
    handleOk() {
      this.$refs['form'].validate(this.validate)
    },
    async validate(valid) {
      if (valid) {
        this.confirmLoading = true
        if (this.isAdd) {
          this.doAdd()
        } else {
          this.doEdit()
        }
      }
    },
    async doAdd() {
      try {
        const res = await add(this.form)
        this.$message.success({ content: '添加成功!', duration: 2 })
        this.resetForm()
        this.$emit('refreshTable')
      } catch (err) {
        this.confirmLoading = false
        console.error(err.message)
      }
    },
    async doEdit() {
      try {
        const res = await edit(this.form)
        this.$message.success({ content: '修改成功!', duration: 2 })
        this.resetForm()
        this.$emit('refreshTable')
      } catch (err) {
        this.confirmLoading = false
        console.error(err.message)
      }
    },
    resetForm() {
      this.visible = false
      this.confirmLoading = false
      this.$refs['form'].resetFields()
      this.form = { ...defaultForm }
    }
  }
}
</script>
